<template>
 <div class="employRoster-search-table">
    <el-table
      :data="tableDatas_com"
      border
       @row-click='handleRowClick'
      max-height='500'
      :row-class-name = 'handleRowClass'
      style="width: 100%">

    <el-table-column
      v-for='(k,i) in tableOptionSelect'
      :label='k.label'
      :prop='k.value'
      :min-width='k.width || handleTitleWidth(k.label.length)'
      align='center'
      >
    </el-table-column>

  </el-table>
 </div>
</template>

<script>
import { _encode } from '@/common/js/handleCode'

export default {
	props: {
		tableOptionSelect: {
			default: []
		},
		tableDatas: {
			default: []
		}
	},
	computed: {
		tableDatas_com() {
			let result = []

			this.tableDatas.forEach((ele, index, arr) => {
				result.push(ele)
				result[index].xh = index + 1
				if (result[index].birthdate && result[index].birthdate.length >= 10) {
					result[index].birthdate = result[index].birthdate.substring(0, 10)
				}
			})

			return result
		}
	},
	data() {
		return {}
	},

	methods: {
		handleRowClick(data) {
			if (parseInt(data.personnel) !== 1) return

			const sex = data.sex_descr == '女' ? 2 : 1
			const params = {
				emplid: data.emplid,
				sex
			}

			window.open('/module/leaderAppoint.html?' + _encode(JSON.stringify(params)))
		},
		handleTitleWidth(len) {
			if (len < 4) {
				return 80
			} else if (len >= 4 && len <= 6) {
				return len * 30
			} else if (len > 6) {
				return len * 20
			}
		},

		handleRowClass(data) {
			if (parseInt(data.personnel) !== 1) return 'not-allowed'
			return 'pointer'
		}
	}
}
</script>

<style lang='less'>
.employRoster-search-table {
  padding: 15px 15px 30px 15px;
}
.not-allowed {
  cursor: not-allowed;
}

.pointer {
  cursor: pointer;
}
</style>
